<template>
  <div class="full-box p-a-mini d-flex-c">
    <div class="f-20 ta-c p-a-s">皮尔逊Ⅲ型曲线的模比系数Kp值表（Cs=3.5Cv）</div>
    <BKTable ref="grid" :columns="columns" :data="tableData" :has-pager="false"
      :has-seq="false"
      class="flex-1 overflow-hidden"></BKTable>
  </div>
</template>

<script>
export default {
  name: 'KPTable',
  data () {
    return {
      columns: [
        { title: 'N年一遇', children: [{
          title: 'cv',
          field: 'NYY',
          minWidth: 75,
          slots: {
            header: () => {
              return [
                <div class="absolute-container header-container">
                  <div style="position: absolute;left: 5px;bottom: 0;">Cv</div>
                  <div style="position: absolute;right: 5px;top: 0;">P(%)</div>
                  <svg width="100%" height="100%"><line x1="0" y1="0" x2="100%" y2="100%" stroke="#e8eaec" stroke-width="1"/></svg>
                </div>
              ]
            }
          }
        }] },
        { title: '100000', children: [{title: '0.001', field: 'MB', minWidth: 75}] },
        { title: '50000', children: [{title: '0.002', field: 'MC', minWidth: 75}] },
        { title: '20000', children: [{title: '0.005', field: 'MD', minWidth: 75}] },
        { title: '10000', children: [{title: '0.01', field: 'ME', minWidth: 75}] },
        { title: '1000', children: [{title: '0.1', field: 'MF', minWidth: 60}] },
        { title: '500', children: [{title: '0.2', field: 'MG', minWidth: 50}] },
        { title: '303', children: [{title: '0.33', field: 'MH', minWidth: 55}] },
        { title: '200', children: [{title: '0.5', field: 'MI', minWidth: 50}] },
        { title: '100', children: [{title: '1', field: 'MJ', minWidth: 50}] },
        { title: '50', children: [{title: '2', field: 'MK', minWidth: 50}] },
        { title: '30', children: [{title: '3.33', field: 'ML', minWidth: 55}] },
        { title: '20', children: [{title: '5', field: 'MM', minWidth: 50}] },
        { title: '10', children: [{title: '10', field: 'MN', minWidth: 50}] },
        { title: '5', children: [{title: '20', field: 'MO', minWidth: 50}] },
        { title: '2', children: [{title: '50', field: 'MP', minWidth: 50}] },
        { title: '1.3', children: [{title: '75', field: 'MQ', minWidth: 50}] },
        { title: '1.3', children: [{title: '50', field: 'MR', minWidth: 50}] },
        { title: '1.1', children: [{title: '90', field: 'MS', minWidth: 50}] },
        { title: '1.1', children: [{title: '95', field: 'MT', minWidth: 50}] },
        { title: '1.0', children: [{title: '99', field: 'MU', minWidth: 50}] },
        { title: '', children: [{title: 'cs', field: 'MV', minWidth: 75, slots: {
            header: () => {
               return [
                <div class="absolute-container header-container">
                  <div style="position: absolute;right: 5px;bottom: 0;">Cs</div>
                  <div style="position: absolute;left: 5px;top: 0;">P(%)</div>
                  <svg width="100%" height="100%"><line x1="0" y1="100%" x2="100%" y2="0" stroke="#e8eaec" stroke-width="1"/></svg>
                </div>
              ]
            }
          }}] },
      ],
      tableData: []
    }
  },
  created () {
    this.fetchData()
  },
  methods: {
    async fetchData () {
      const { rows } = await this.$request.singleTableOperation({
        url: '/grid/getTableData',
        metaSet: 'YSQJC_JC_KP',
        methodCode: 'get_kp',
        methodParams: {}
      })
      rows.forEach(item => {
        Object.keys(item).forEach(key => {
          if (typeof item[key] !== 'number') {
            item[key] = null
          } else {
            item[key] = item[key].toFixed(2)
          }
        })
      })
      this.tableData = rows
    }
  }
}
</script>
